<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      margin-right: 20px;
      width: 200px;
      height: 200px;
    }
  </style>
</head>

<body>
  <script>
    let urls = ['https://t7.baidu.com/it/u=2235283139,2108773862&fm=193&f=GIF', 'https://t7.baidu.com/it/u=2369985169,1283503597&fm=193&f=GIF', 'https://t7.baidu.com/it/u=2159461460,31424906&fm=193&f=GIF', 'https://t7.baidu.com/it/u=2159461460,31424906&fm=193&f=GIF', 'https://t7.baidu.com/it/u=340402538,2113214724&fm=193&f=GIF', 'https://t7.baidu.com/it/u=2270040441,2487274433&fm=193&f=GIF', 'https://t7.baidu.com/it/u=3707959938,1767557661&fm=193&f=GIF', 'https://t7.baidu.com/it/u=1662785792,1988645283&fm=193&f=GIF']
    // function loadImg (url) {
    //   return new Promise((resolve, reject) => {
    //     const img = new Image()
    //     img.onload = function () {
    //       console.log('一张图片加载完成');
    //       resolve(img)
    //     }
    //     img.onerror = function () {
    //       reject(new Error('cound not load image at' + url))
    //     }
    //     img.src = url
    //   })
    // }

    // function limitLoad (urls, handler, limit) {
    //   const data = []; // 存储所有的加载结果
    //   let p = Promise.resolve();
    //   const handleUrls = (urls) => { // 这个函数是为了生成3个url为一组的二维数组
    //     const doubleDim = [];
    //     const len = Math.ceil(urls.length / limit); // Math.ceil(8 / 3) = 3
    //     console.log(len) // 3, 表示二维数组的长度为3
    //     for (let i = 0; i < len; i++) {
    //       doubleDim.push(urls.slice(i * limit, (i + 1) * limit))
    //     }
    //     return doubleDim;
    //   }
    //   const ajaxImage = (urlCollect) => { // 将一组字符串url 转换为一个加载图片的数组
    //     console.log(urlCollect)
    //     return urlCollect.map(url => handler(url))
    //   }
    //   const doubleDim = handleUrls(urls); // 得到3个url为一组的二维数组
    //   doubleDim.forEach(urlCollect => {
    //     p = p.then(() => Promise.all(ajaxImage(urlCollect))).then(res => {
    //       data.push(...res); // 将每次的结果展开，并存储到data中 (res为：[img, img, img])
    //       return data;
    //     })
    //   })
    //   return p;
    // }
    // limitLoad(urls, loadImg, 3).then(res => {
    //   console.log('res', res); // 最终得到的是长度为8的img数组: [img, img, img, ...]
    //   res.forEach(img => {
    //     document.body.appendChild(img);
    //   })
    // });
    function loadImg (url) {
      return new Promise((resolve, reject) => {
        let img = new Image()
        img.onload = function () {
          console.log('架子啊成功');
          resolve(img)
        }
        img.onerror = function () {
          reject('加载失败')
        }
        img.src = url
      })
    }

    function limitLoad (urls, loadImg, limit) {
      let data = []
      let p = Promise.resolve()
      const handleUrls = (urls) => { // 这个函数是为了生成3个url为一组的二维数组
        const doubleDim = [];
        const len = Math.ceil(urls.length / limit); // Math.ceil(8 / 3) = 3
        console.log(len) // 3, 表示二维数组的长度为3
        for (let i = 0; i < len; i++) {
          doubleDim.push(urls.slice(i * limit, (i + 1) * limit))
        }
        return doubleDim;
      }

      const doubleDim = handleUrls(urls)
      function ajaxImage (urlCollect) {
        return urlCollect.map(url => loadImg(url))
      }
      doubleDim.forEach(urlCollect => {
        p = p.then(() => Promise.all(ajaxImage(urlCollect))).then(res => {
          data.push(...res); // 将每次的结果展开，并存储到data中 (res为：[img, img, img])
          return data;
        })
      })

      return p
    }
    limitLoad(urls, loadImg, 3).then((res) => {
      for (let i = 0; i < res.length; i++) {
        document.body.appendChild(res[i])
      }
    })
  </script>
</body>

</html>